<template>
    <!-- <el-menu
        active-text-color="#ffd04b"
        background-color="#2d3436"
        text-color="#fff"
        :collapse="!isCollapse"
    >
        <el-sub-menu index="1">
            <template #title>
                <el-icon><Location /></el-icon> <span>电商模块</span>
            </template>
            <el-menu-item index="1-1"
                ><el-icon><Handbag /></el-icon
                ><router-link to="/product/list"
                    >产品管理</router-link
                ></el-menu-item
            >
            <el-menu-item index="1-2"
                ><el-icon><ReadingLamp /></el-icon
                ><router-link to="/product/category"
                    >Excel管理</router-link
                ></el-menu-item
            >
            <el-menu-item index="1-3"
                ><el-icon><ReadingLamp /></el-icon
                ><router-link to="/product/cart"
                    >购物车管理</router-link
                ></el-menu-item
            >
            <el-menu-item index="1-4"
                ><el-icon><ReadingLamp /></el-icon
                ><router-link to="/product/banner"
                    >轮播管理</router-link
                ></el-menu-item
            >
            <el-menu-item index="1-5"
                ><el-icon><ReadingLamp /></el-icon
                ><router-link to="/product/map"
                    >商家地图</router-link
                ></el-menu-item
            >
        </el-sub-menu>

        <el-sub-menu index="2">
            <template #title>
                <el-icon><OfficeBuilding /></el-icon><span>会员管理</span>
            </template>
            <el-menu-item index="2-1"
                ><el-icon><Mic /></el-icon
                ><router-link to="/account/list"
                    >会员列表</router-link
                ></el-menu-item
            >
            <el-menu-item index="2-2"
                ><el-icon><Camera /></el-icon
                ><router-link to="/account/add"
                    >会员统计</router-link
                ></el-menu-item
            >
        </el-sub-menu>

        <el-sub-menu index="3">
            <template #title>
                <el-icon><OfficeBuilding /></el-icon><span>订单管理</span>
            </template>
            <el-menu-item index="3-1"
                ><el-icon><Mic /></el-icon
                ><router-link to="/orders/list"
                    >订单列表</router-link
                ></el-menu-item
            >
            <el-menu-item index="3-2"
                ><el-icon><Camera /></el-icon
                ><router-link to="/orders/statistics"
                    >订单统计</router-link
                ></el-menu-item
            >
        </el-sub-menu>

        <el-sub-menu index="4">
            <template #title>
                <el-icon><OfficeBuilding /></el-icon><span>OA管理</span>
            </template>
            <el-menu-item index="4-1"
                ><el-icon><Mic /></el-icon
                ><router-link to="/log/list"
                    >日志列表</router-link
                ></el-menu-item
            >
            <el-menu-item index="4-2"
                ><el-icon><Camera /></el-icon
                ><router-link to="/log/reply"
                    >日志回复</router-link
                ></el-menu-item
            >
            <el-menu-item index="4-3"
                ><el-icon><Camera /></el-icon
                ><router-link to="/log/add"
                    >日志添加</router-link
                ></el-menu-item
            >
        </el-sub-menu>
    </el-menu> -->

    <!-- <el-menu
        router
        default-active="1"
        :collapse="!isCollapse"
        class="el-menu-vertical-demo"
        active-text-color="#ffd04b"
        background-color="#2d3436"
        text-color="#fff"
    >
        <el-sub-menu
            v-for="(item, index) in menuList"
            :index="item.path"
            :key="index"
        >
            <template #title>
                <el-icon><location /></el-icon>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item
                v-for="(subItem, index) in item.children"
                :index="subItem.path"
                :key="index"
            >
                <el-icon><location /></el-icon>
                {{ subItem.label }}
            </el-menu-item>
        </el-sub-menu>
    </el-menu> -->
    
    <!-- default-active="1" -->
    <el-menu
        active-text-color="#ffd04b"
        background-color="#2d3436"
        text-color="#fff"
        :collapse="!isCollapse"
        router
    >
        <el-sub-menu v-for="item in menuList" :key="item.id" :index="item.path">
            <template #title>
                <el-icon><component :is="menuIconCom(item.iconCls)" /></el-icon>
                <span>{{ item.label}}</span>
            </template>

            <el-menu-item
                v-for="subItem in item.children"
                :key="subItem.id"
                :index="subItem.path"
                style="margin-left:11px"
                >{{ subItem.label }}</el-menu-item
            >
        </el-sub-menu>
    </el-menu>
</template>

<script lang="ts" setup>
import {
    Location,
    Grid,
    Setting,
    Service,
    User,
    Aim,
    Goods,
    Present,
    Calendar,
    OfficeBuilding,
    School,
} from '@element-plus/icons-vue'
import { useMenuStore } from '@/stores/menu'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
defineProps({ isCollapse: Boolean })
const route = useRoute()
const menuStore = useMenuStore()
const menuList = computed(() => menuStore.list) //动态菜单数据

const menuIconCom = icon => {
    switch (icon) {
        case 'el-icon-user':
            return Location
        case 'el-icon-setting':
            return Setting
        case 'el-icon-service':
            return Service
        case 'el-icon-user-solid':
            return User
        case 'el-icon-office-building':
            return Aim
        case 'el-icon-goods':
            return Goods
        case 'el-icon-camera':
            return Present
        case 'el-icon-help':
            return Calendar
        case 'el-icon-student':
            return OfficeBuilding
        case 'el-icon-project':
            return School
        default:
            return Grid
    }
}

onMounted(() => {
    console.log('route>>>', route)
})
// import {
//     Location,
//     Handbag,
//     ReadingLamp,
//     Camera,
//     Mic,
//     OfficeBuilding,
// } from '@element-plus/icons-vue'
// export default {
//     props: {
//         isCollapse: Boolean,
//     },
//     components: { Location, Handbag, ReadingLamp, Camera, Mic, OfficeBuilding },
//     computed: {
//         menuList() {
//             const list = this.$router.options.routes
//             const menu = list[2].children
//             const list1 = menu.filter(item => item.meta.hidden)
//             return list1
//         },
//     },
// }
</script>

<style lang="scss" scoped>
a {
    color: white;
    text-decoration: none;
}
// .el-menu-vertical-demo:not(.el-menu--collapse) {
//     width: 200px;
//     min-height: 400px;
// }
</style>
